<template>
	<view class="App_col App_bg">
		<!--  #ifdef H5 -->
		<app-header></app-header>
		<!--  #endif -->
		<view class="tphone">选择区域</view>
		<view class="selected">
			<!-- <view class="area_wrap" @click="isShowAddress = true"> -->
			<view class="area_wrap" @click="showPicker">
				<view class="selebefore">
					<!-- <input type="text" name="provice" id="sel_city"
						readonly="readonly" placeholder="请选择" :disabled="true"> -->
					<span name="provice" class="sel_city">{{ address }}</span>
				</view>
				<image :src="`${constant.imgUrl}login/right.png`" alt></image>
			</view>
			<view class="next_page">
				<view class="no_avtive" v-show="nonext">下一步</view>
				<view class="next_avtive" v-show="seleac" @click="activenext">下一步</view>
			</view>
		</view>
		<!-- <view class="area-class" position="bottom">
			<view class="navhead">
				<navigator class="cancel">取消</navigator>
				<navigator class="confirm">确定</navigator>
			</view>
		</view> -->
		<!-- <city-select
			v-model="isShowAddress"
			@confirm="confirm"
			:defaultVal="defaultVal">
		</city-select> -->

		<!-- <w-picker
			mode="region"
			@confirm="onConfirm"
			ref="region"
			themeColor="#f00"
		></w-picker> -->
        	<mpvue-city-picker themeColor="#ff9000" ref="mpvueCityPicker" :pickerValueDefault="defaultArea"
		 @onConfirm="onConfirm"></mpvue-city-picker>
	</view>
</template>

<script>
// import wPicker from '@/components/w-picker/components/w-picker/w-picker.vue'

import mpvueCityPicker from '@/components/mpvue-citypicker/mpvueCityPicker'
import AppHeader from '@/components/App_transparent_header'
import { upgradeBusiness } from '@/api/login/index'
import { getPosition } from '@/utils/location'
export default {
	name: 'LoginCity',
	components: {
		'app-header': AppHeader,
		// wPicker
		mpvueCityPicker
	},
	data() {
		return {
			constant: this.$constant,
			// defaultRegion: ,
			nonext: true,
			seleac: false,
			citys: '正在定位',
			proviceid: '',
			cityid: '',
			areaid: '',
			role: '',
			areaVisible: false,
			streetVisible: false,
			address: '请选择',
			isShowAddress: false,
			defaultVal: '',
			areaString: '',
			option: {},
			mode: '',
			defaultArea: [0, 0, 1]
		}
	},
	onLoad(option) {
		let that = this
		console.log(option, '城市页option')
		this.option = option
		this.role = option.role

		// const userRegions = uni.getStorageSync('userRegion')
		getPosition(
			userRegion => {
				if (userRegion) {
					// const userRegion = JSON.parse(userRegions)
					that.address = userRegion.province.name + userRegion.city.name + userRegion.district.name
					that.proviceid = userRegion.province.id
					that.cityid = userRegion.city.id
					that.areaid = userRegion.district.id
					that.nonext = false
					that.seleac = true
				}
			}
		)
	},
	methods: {
		showPicker() {
			// this.$refs.region.show()
			this.$refs.mpvueCityPicker.show()
		},
		onConfirm(e) {
			console.log(e, 'mpvue picker')
			this.address = e.label
			this.proviceid = e.code[0]
			this.cityid = e.code[1]
			this.areaid = e.code[2]
			this.nonext = false
			this.seleac = true
		},
		activenext() {
			const params = {
				role_id: this.role,
				province_id: this.proviceid,
				city_id: this.cityid,
				district_id: this.areaid
			}
			const paramsArr = ['owner_user_id', 'parent_id', 'share_user_id', 'p_share_user_id', 'recommend_admin_id', 'f']
			paramsArr.forEach(item => {
				if (this.option[item]) {
					params[item] = this.option[item]
				}
			})

			upgradeBusiness(params).then((res) => {
				uni.setStorageSync('user_id', res.data.user_id)
				uni.setStorageSync('subscribe', res.data.subscribe)
				const params = {
					owner_user_id: res.data.user_id,
					user_id: res.data.user_id
				}
				let loginReturnUrl = uni.getStorageSync('loginReturnUrl')
				if (loginReturnUrl) {
					uni.removeStorageSync('loginReturnUrl')
					uni.redirectTo({
						url: this.$util.spliceUrl(`${loginReturnUrl}`, `owner_user_id=${res.data.user_id}`)
					})
				} else {
					uni.removeStorageSync('storageRoleId')
					/* if (res.data.role_id == 2) {
						uni.redirectTo({
							url: `/pages/design/material/index${this.$util.parse(params)}`
						})
					} else {*/
					uni.redirectTo({
						url: `/pages/getGuest/shareIndex${this.$util.parse(params)}`
					})
					// }
				}
				// uni.navigateTo({
				// 	// url: `/pages/page/webview/index?user_id=${res.data.user_id}&role_id=${res.data.role_id}`
				// })
				// if (res.data.role_id == 1) {
				//     uni.navigateTo({
				//         url: `/pages/design/designCompany/indexNew${this.$util.parse({
				//             active: 0,
				//             owner_user_id: res.data.user_id,
				//             share_user_id: res.data.user_id,
				//             p_share_user_id: ''
				//         })}`
				//     })
				// } else {
				// }
			})
		}
	}

}
</script>

<style scoped>

@import url("../../../static/css/module/loginProcess.scss");

.tphone {
    font-size: 52px;
	font-weight: normal;
	font-stretch: normal;
	line-height: 1;
	letter-spacing: 1px;
	color: #040404;
    margin-top: 91px;
}

.selected,
.next_page {
    margin-top: 60px;
}

.area_wrap {
    display: flex;
    justify-content: space-between;
    align-items: center;
    width: 610px;
    height: 140px;
    border-radius: 10px;
    line-height: 140px;
    background-image: url("https://wximg.meijiabang.com/hkds/miniapp/images/login/seleback.png");
    background-size: 100% 100%;
    box-shadow: 0 0 15px 6px #eee;
}

.area_wrap image {
    width: 15px;
    height: 28px;
    margin-right: 30px;
}

.selebefore {
    display: flex;
    align-items: center;
    width: 80%;
    height: 100px;
    line-height: 100px;
    margin-left: 44px;
}

.selebefore .sel_city {
  width: 100%;
  height: 100%;
  border: none;
  font-size: 36px;
  line-height: 100px;
}

.mask {
  position: fixed;
  width: 100%;
  height: 100%;
  left: 0;
  top: 0;
  z-index: 9;
  background: black;
  opacity: 0.5;
}

.area-class {
  width: 100%;
  height: 40%;
  position: fixed;
  bottom: 0;
  font-size: 30px;
  z-index: 99;
  background: white;
}

.navhead {
  height: 100px;
  line-height: 100px;
  font-size: 32px;
}

.cancel {
  color: #999999;
  float: left;
  margin-left: 30px;
  cursor: pointer;
}

.confirm {
  float: right;
  margin-right: 30px;
  width: 120px;
  height: 60px;
  background: #ffd11a;
  border-radius: 30px;
  line-height: 60px;
  text-align: center;
  margin-top: 20px;
  cursor: pointer;
}

.picker {
  margin-top: 50px;
  width: 90%;
  margin-left: 5%;
}

.picker .picker-item .picker-selected {
  border-bottom: 1px solid #cccc;
  border-top: 1px solid #cccc;
}

.picker-item {
  text-align: center !important;
  font-size: 30px;
}

 .sel_city {
      display: -webkit-box;
      word-break: break-all;
      /*! autoprefixer: off */
      -webkit-box-orient: vertical;
      /* autoprefixer: on */
      -webkit-line-clamp: 1;
      overflow: hidden;
      text-overflow: ellipsis;
  }
</style>
